<template>
  <div class="setTag">
    <div>
      <el-input
        v-model="tagStr"
        placeholder="输入标签名称,按回车键Enter生成标签"
        @change="tagChange"
      ></el-input>
    </div>
    <div class="flexLeft">
      <div style="color: #999999; white-space: nowrap;padding:0 16px 0 0">已选择:</div>
      <div class="flexLeft">
        <tag
          v-for="(item, index) in tags"
          :key="index"
          :mation-str="item"
          :state="true"
          @deletFun="tagDelet"
        ></tag>
      </div>
    </div>
  </div>
</template>

<script>
import tag from './tag';
export default {
  components: {
    tag
  },
  props: ['tags'],
  data() {
    return {
      tagStr: ''
    };
  },
  methods: {
    // 标签回车事件
    tagChange(e) {
      this.tags.push(e);
      this.tagStr = '';
      // this.$parent.updateDoctorMsg.tags = this.tags;
      // console.log(this.$parent)
      this.$emit('setTageFun', this.tags);
    },
    // 删除标签事件
    tagDelet() {
      this.tags.pop();
    }
  }
};
</script>

<style scoped lang='scss'>
.setTag {
  padding: 0 30px;
  > div:nth-child(2) {
    align-items: baseline;
    padding: 16px 0 0 0;
    // > div:nth-child(2) {
    //   flex-wrap: wrap;
    //   > div {
    //     width: 25%;
    //     text-align: center;
    //     padding: 0 0 16px 0;
    //   }
    // }
  }
}
</style>
